<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" th:href="@{~/layui/css/layui.css}">
		<script th:src="@{~/layui/layui.js}"></script>
		<script th:src="@{~/js/clipboard.js}"></script>
		<title>云社区-个人中心</title>
	</head>
	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo">云社区</div>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item" style="margin: 0 20px">
						<a>系统消息<span class="layui-badge">99+</span></a>
					</li>
					<li class="layui-nav-item"  style="margin:0 20px;">
						欢迎你~<span sec:authentication="name" style="padding:0 0 0 20px"></span>
					</li>
					<li class="layui-nav-item"><a th:href="@{~/logout}">退出</a></li>
				</ul>
			</div>
			<div class="layui-side layui-bg-black">
				<div class="layui-side-scroll">
					<ul class="layui-nav layui-nav-tree" lay-filter="test" lay-shrink="all">
						<li class="layui-nav-item"><a href="index">首页</a></li>
						<li class="layui-nav-item"><a href="user">待开发...</a></li>
						<li class="layui-nav-item"><a href="">设置</a></li>
					</ul>
				</div>
			</div>
			<div class="layui-body" style="background-color: #F2F2F2;">
				<div class="layui-fluid">
					<div class="layui-row layui-col-space15" style="padding-top: 10px;">
						<div class="layui-col-md10 ">
							<div class="layui-card">
								<div class="layui-card-header">已有资源</div>
								<div class="layui-card-body">
									<table id="user-data" lay-filter="test" ></table>
								</div>
							</div>
						</div>
						<div class="layui-col-md2">
							<div class="layui-row layui-col-space15">
								<div class="layui-col-md12">
									<div class="layui-card">
										<div class="layui-card-header">个人信息</div>
										<div class="layui-card-body">
											<div class="layui-row layui-col-space15">
												<div class="layui-col-lg12">
													<li style="background-color: #F8F8F8;">
														<a href="user">
															<h3 style="padding-bottom: 5px;padding-left: 5px;padding-right: 5px;color: #999999;">当前金币</h3>
															<p>
																<cite style="font-size: 30px;color: #009688;padding: 0 10px;" th:text="${userHaveMoney}"></cite>
															</p>
														</a>
													</li>
												</div>
												<div class="layui-col-lg12">
													<li style="background-color: #F8F8F8;">
														<a href="#">
															<h3 style="padding-bottom: 5px;padding-left: 5px;padding-right: 5px;color: #999999;">当前资源数</h3>
															<p>
																<cite style="font-size: 30px;color: indianred;padding: 0 10px;" th:text="${userHaveWap}">999</cite>
															</p>
														</a>
													</li>
												</div>
											</div>


										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-footer">
				<div class="layui-main">
					<p align="center">@2019 <a th:href="@{http://www.yqfeng.xyz}">www.yqfeng.com</a> ---云社区</p>
				</div>
			</div>
		</div>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="go">前往</a>
		</script>
		<script>
			layui.use('element', function() {
				var element = layui.element;
			});
			layui.use(['table','jquery'], function() {
				var table = layui.table,
						$=layui.jquery;

				//第一个实例
				table.render({
					elem: '#user-data',
					url: '/user/wapData', //数据接口,
					limit:17,
					limits:[17,30,45,60],
					page: true ,//开启分页,
					cellMinWidth: 80,
					cols: [
						[ //表头
							{
								field: 'id',
								title: 'ID',
								fixed: 'left',
								width: 100
							}, {
							field: 'name',
							title: '资源名称',
							width:250

						}, {
							field: 'www',
							title: '资源链接',

						}, {
							field: 'password',
							title: '资源密码',
							width: 100
						},  {
							field: 'typeStr',
							title: '资源类型',
							width: 100
						}, {
							fixed: 'right',
							title:'操作',
							toolbar: '#barDemo',
							width:250,
							align:"center"
						}
						]
					]
				});
				table.on('tool(test)', function(obj){
					var data = obj.data;
					if (obj.event==='go') {
						obj.tr.attr("data-clipboard-text",obj.data.password);
						obj.tr.attr("id","zid"+data.id);
						var clipboard = new ClipboardJS("#zid"+data.id);
						clipboard.on('success', function(e) {
							$.ajax({
								url: "/add?id=" + data.id,
							});
							window.open("https://"+data.www,'_blank');
						});
					}
				});
			});

		</script>
	</body>
</html>
